<template>
  <div>
    <div class="container-body w">
      <!-- 热门职位 -->
      <div class="card-container">
        <div class="stitle">
          <h2>我的职位</h2>
        </div>
        <Row>
          <div v-for="(item,index) in recruitlist" :key="index">
            <Col span="8">
              <Card style="border-radius:0;">
                <div class="recruit" style="text-align:center">
                  <div class="rtitle">
                    <div class="title-text">{{item.posttitle}}</div>
                    <div
                      class="salary-text"
                    >{{item.salary}}元/{{dbase.salaryunitarr[item.salaryunitindex]}}</div>
                  </div>
                  <div class="rtags wordcut">
                    <span>{{item.adress}}</span>
                    <span>{{dbase.paymodearr[item.paymodeindex]}}</span>
                    <span>招{{item.recruitnum}}人</span>
                  </div>
                  <div class="wel wordcut">
                    <span>{{item.time}}</span>
                  </div>
                  <!-- 发布者 -->
                  <div class="poster wordcut">
                    <!-- if 公司 -->
                    <div class="poster wordcut" v-if="item.isc == 1">
                      <div class="post-com" v-if="item.cominfo">
                        <img
                          class="post-comlogo"
                          :src="item.cominfo.logo ? item.cominfo.logo : '/static/images/qy_uplogo.png'"
                          alt
                        />
                        <div class="post-cominfo">
                          <div class="cominfo-name">{{item.cominfo.comname}}</div>
                        </div>
                      </div>
                    </div>
                    <div class="poster wordcut" v-if="item.isc == 2">
                      <div class="post-com">
                        <img class="post-comlogo" src="/static/images/qy_uplogo.png" alt />
                        <div class="post-cominfo">
                          <div class="cominfo-name">个人实名发布者</div>
                        </div>
                      </div>
                    </div>
                    <div class="poster wordcut" v-if="item.isc == 0">
                      <div class="post-com">
                        <img class="post-comlogo" src="/static/images/qy_uplogo.png" alt />
                        <div class="post-cominfo">
                          <div class="cominfo-name">个人未实名发布者</div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- 操作 -->
                  <div class="ctl-btns">
                    <div class="btn" @click="deleterecruit(item.id)">删除</div>
                    <div class="btn" @click="stop(item.id)" v-if="item.isting == 0">停招</div>
                    <div class="btn" @click="cancelstop(item.id)" v-else>取消停招</div>
                    <div class="btn" @click="toRecruitdetail(item.id)">详情</div>
                    <div class="btn" @click="showTopPop(item.id)" v-if="item.istop == 0">置顶</div>
                    <div class="btn" v-else>{{item.toptime}}</div>
                    <!-- <div class="btn">投递数据</div> -->
                    <!-- <button @click="toBgt" :data-zpid="item.id">修改</button> -->
                  </div>
                </div>
              </Card>
            </Col>
          </div>
        </Row>
      </div>
    </div>
    <!-- 发布成功 -->
    <Modal v-model="modal11" title="选择置顶">
      <div class="poststatus">
        <Row>
          <Col span="24">
            <Card style="margin-top:20px">
              <div style="text-align:center">
                <h2 class="post-title">选择置顶</h2>
                <div class="settop">
                  <Select v-model="topselect" @on-change="selectchange" style="width:200px">
                    <Option
                      v-for="(item,index) in top_rules"
                      :value="index"
                      :key="index"
                    >{{ item.name }}</Option>
                  </Select>
                </div>
              </div>
            </Card>
          </Col>
        </Row>
      </div>
      <div slot="footer">
        <Button type="error" size="large" long :loading="modal_loading" @click="settop">立即置顶</Button>
      </div>
    </Modal>
    <!-- 微信支付二维码 -->
    <Modal v-model="modal2" width="360" footer-hide>
      <p slot="header" style="color:#f60;text-align:center">
        <Icon type="ios-information-circle"></Icon>
        <span>请使用微信扫一扫支付</span>
      </p>
      <div style="display:flex;text-align:center">
        <!-- 二维码 -->
        <div id="qrCode" ref="qrCodeDiv" style="margin: 0 auto"></div>
      </div>
    </Modal>
  </div>
</template>
<script>
export default {
  data() {
    return {
      recruitlist: [],
      dbase: [],
      uid: "",
      modal11: false,
      telnums: "",

      fee: "",
      time: "",
      top_rules: [],
      topselect: "",

      modal2: false,
      modal_loading: false
    };
  },
  created() {
    var that = this;

    that.$axios.get(that.$http.apiurl("mpinfo")).then(res => {
      console.log(res.data);
      this.dbase = res.data.dbase;
    });

    if (!localStorage.getItem("user_info")) {
      console.log(localStorage.getItem("user_info"));
      this.$Message.error("未登陆,请登陆!");
      this.$router.push({ name: "login", query: {} });
    } else {
      this.uid = JSON.parse(localStorage.getItem("user_info")).id;
      that.telnums = JSON.parse(localStorage.getItem("user_info")).telnum;
    }

    var appinfo = this.$store.getters.gappinfo;

    this.top_rules = [
      {
        name: "置顶1天(收费" + appinfo.tops.oneday + "元)",
        fee: appinfo.tops.oneday,
        time: 1,
        index: "0",
        check: true
      },
      {
        name: "置顶3天(收费" + appinfo.tops.theday + "元)",
        fee: appinfo.tops.theday,
        time: 3,
        index: "1"
      },
      {
        name: "置顶7天(收费" + appinfo.tops.sevday + "元)",
        fee: appinfo.tops.sevday,
        time: 7,
        index: "2"
      },
      {
        name: "置顶15天(收费" + appinfo.tops.fiftday + "元)",
        fee: appinfo.tops.fiftday,
        time: 15,
        index: "2"
      },
      {
        name: "置顶1个月(收费" + appinfo.tops.onemoth + "元)",
        fee: appinfo.tops.onemoth,
        time: 30,
        index: "3"
      }
    ];
    this.fee = this.top_rules[0].fee;
    this.time = this.top_rules[0].time;
    console.log(this.top_rules);

    this.getrecruitlist();
  },
  methods: {
    SQRCode: function() {
      document.getElementById("qrCode").innerHTML = "";
      // window.location.protocol+"//"+window.location.host
      var qrurl =
        "https://open.ls11.cn/app/index.php?i=52&c=entry&do=pcpay&m=lshd_zhaopinhign&telnum=" +
        this.telnums +
        "&fee=" +
        this.fee;
      console.log(qrurl);
      new this.$qrcode(this.$refs.qrCodeDiv, {
        text: qrurl,
        width: 200,
        height: 200,
        colorDark: "#333333", //二维码颜色
        colorLight: "#ffffff", //二维码背景色
        correctLevel: this.$qrcode.CorrectLevel.L //容错率，L/M/H
      });
    },
    // 获得数据
    getrecruitlist() {
      this.$http
        .aget("myportjob", {
          uid: this.uid
        })
        .then(res => {
          console.log(res);
          this.recruitlist = res;
        });
    },
    toRecruitdetail(e) {
      this.$router.push({ name: "recruitdetail", query: { zid: e } });
    },
    // 删除
    deleterecruit(e) {
      var id = e;
      var that = this;
      that.$http
        .aget("delete", {
          did: id,
          op: "partjob"
        })
        .then(res => {
          console.log(res);
          that.getrecruitlist();
        });
    },
    // 停招
   stop(e) {
     var id = e;
     var that = this;
				that.$http.apost('sinfo', {
					op: 'nopartjobting',
					pid: id
				}).then(res => {
					console.log(res);
					that.getrecruitlist();
				})
			},
   // 取消停招
			cancelstop(e) {
				this.$http.aget('sinfo', {
					op: 'partjobting',
					pid: e
				}).then(res => {
					console.log(res);
					this.getrecruitlist();
				})
			},
    // 弹出置顶
    showTopPop(e) {
      this.topid = e;
      this.modal11 = true;
    },
    selectchange(e) {
      this.fee = this.top_rules[e].fee;
      this.time = this.top_rules[e].time;
      console.log(this.fee);
    },
    // 设置置顶
    settop() {
      var that = this;
      that.modal11 = false;
      // 微信支付
      this.modal2 = true;
      this.getPayResult();
    },
    getPayResult() {
      var that = this;
      this.$http
        .aget("ginfo&op=getpcpay&telnum=" + this.telnums)
        .then(payre => {
          console.log(payre);
          if (payre) {
            // 支付成功
            that.$http
              .aget("tops", {
                op: "zpxx",
                toptime: that.time,
                topid: that.topid
              })
              .then(res => {
                this.modal2 = false;
              });
          } else {
            setTimeout(function() {
              that.getPayResult(full);
            }, 1000);
          }
        });
    }
  },
  mounted() {
    this.SQRCode();
  }
};
</script>
<style lang="scss" scoped>
body {
  background: #f1f1f1;
}
.card-container {
  background-color: #fff;
  padding: 10px;
  margin-top: 50px;

  .stitle {
    padding-bottom: 10px;
    margin: 10px 0;
  }
}

// 热门职位
.recruit {
  text-align: left !important;

  .rtitle {
    display: flex;
    justify-content: space-between;

    .title-text {
      font-size: 16px;
      font-weight: 600;
      max-width: 180px;
    }

    .salary-text {
      font-size: 16px;
      font-weight: 600;
      color: red;
    }
  }

  .rtags {
    margin-top: 3px;
    color: #999;
    padding-bottom: 10px;
  }

  .wel {
    margin-top: 3px;
    color: #999;

    span {
      display: inline-block;
      width: 61px;
      height: 26px;
      padding: 0 5px;
      font-size: 12px;
      line-height: 26px;
      color: #999;
      border: 1px solid #f0f0f0;
      border-radius: 3px;
      text-align: center;
    }
  }

  .poster {
    height: 58px;

    .post-com {
      margin-top: 18px;
      padding-top: 18px;
      border-top: 1px dashed #e0e0e0;

      .post-comlogo {
        float: left;
        width: 20px;
        height: 20px;
      }

      .post-cominfo {
        margin-left: 24px;

        .cominfo-name {
          font-size: 14px;
          color: #333;
          display: flex;
          align-items: center;
        }

        .cominfo-tags {
          color: #0c8;
        }
      }
    }
  }
}
.ctl-btns {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  text-align: center;
  box-shadow: 0 -4px 4px -4px rgba(225, 225, 227, 0.3);
  margin-top: 20px;

  .btn {
    font-size: 14px;
    width: 100%;
    height: 44px;
    line-height: 44px;
    color: #1ecdb9;
    padding: 0;
  }
}
</style>